<template>
    <div>
        <!-- 监考员弹框 -->
        <a-modal
            title="分配监考员"
            :visible="invigilatorModal"
            @cancel="$emit('cancel')"
            :destroyOnClose='true'
            :footer="null"
            width="1000px"
            >
            <div class="action" style="overflow:hidden">
                <a-button style="float:right;margin-bottom:10px;" type="primary" @click="addInvigiltor()">添加监考员</a-button>
            </div>
            <a-table 
                size="middle"
                :columns="invigilatorColumns" 
                :data-source="invigilatorList" 
                :rowKey="record=>record.id"
                :locale="{'emptyText': '暂无数据'}"
                bordered>
                <div slot="status" slot-scope="index,record">
                    <a-tag v-if="record.status==0" color="orange">未确认</a-tag>
                    <a-tag v-else-if="record.status==1" color="green">已通过</a-tag>
                    <a-tag v-else color="red">已拒绝</a-tag>
                </div>
                <div slot="action" slot-scope="index,record" class="tableAction">
                    <confirmBox
                        @handleOk="deleteInvigilator(record.id)"
                        :typeName="'删除'"
                        :noticeInfo="record.realname"
                        :noticeType="'考评员'"
                    ></confirmBox>
                </div> 
            </a-table>
        </a-modal>

        <!-- 添加监考员弹框 -->
        <a-modal
            title="添加监考员"
            :visible="addInvigilatorModal"
            @cancel="addInvigilatorModal=false"
            :destroyOnClose='true'
            width="1000px"
            class="addInvigilatorModal"
            okText="添加"
            cancelText="取消"
            @ok='submitAddInv()'
            >
            <div class="content">
                <ul>
                    <li 
                        v-for="(item,index) in invigilatorType" 
                        :key="index" 
                        @click="changeType(item.value)" 
                        :class="{'active':searchInvigilatorInfo.type==item.value}"
                        >
                        {{item.name}}
                    </li>
                </ul>
                <div class="list">
                    <div v-if="allAssignInvigilatorList.length>0">
                        <div class="listWrap">
                            <a-checkbox 
                                v-for="(item,index) in allAssignInvigilatorList" 
                                :key="index" 
                                :value="item.userId"
                                :disabled="item.isDisabled==2"
                                @change="handleInvigilator(item.userId,item.realname)"
                                :checked="selectInvigilator.filter(value=>value.userId==item.userId&&value.title==item.title).length>0"
                                >
                                {{item.realname}}
                            </a-checkbox>
                        </div>
                        <a-pagination @change="onChange" :current="current" :pageSize="50" :total="assignInvigilatorTotal" />
                    </div>
                    <a-empty v-else description="暂无数据"/>
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script>
const invigilatorColumns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '姓名',
        dataIndex: 'realname'
    },{
        title: '头衔',
        dataIndex: 'title'
    },{
        title: '状态',
        scopedSlots: { customRender: 'status' },
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
    }
]
import confirmBox from "@/components/common/confirmBox"
import {getActiveDetailApi,getExamineeDetailApi,deleteInvigilatorApi,addInvigilatorApi,getAllAssignInvigilatorApi} from "@/request/api"
export default {
    name:'invigilatorModal',
    components:{confirmBox},
    props:{
        invigilatorModal:Boolean,
        examId:String,
        type:String
    },
    created(){
        this.init()
    },
    data(){
        return{
            invigilatorColumns,
            invigilatorList:[],
            addInvigilatorModal:false,
            selectInvigilator:[],
            searchInvigilatorInfo:{
                type:0,
                page:1,
                pageSize:50
            },
            allAssignInvigilatorList:[],
            invigilatorType:[{'name':'专家','value':0},{'name':'考核师','value':1},{'name':'培训师','value':2},{'name':'考务人员','value':3}],
            current:1,
            assignInvigilatorTotal:0,
        }
    },
    methods:{
        init(){
            let api
            let formData
            if(this.type==1){
                api=getExamineeDetailApi
                formData={examId:this.examId}
            }else{
                api=getActiveDetailApi
                formData={trainingId:this.examId}
            }
            this.getToken(api,formData,res=>{
                this.invigilatorList=res.data.invigilatorConfirms.map((item,index)=>({...item,index:index+1}))
            })
        },
        // 添加监考员
        addInvigiltor(){
            this.addInvigilatorModal=true
            this.getAllAssignInvigilator()
        },
        // 删除分配的监考员
        deleteInvigilator(id){
            this.getToken(deleteInvigilatorApi,{'invigilatorId':id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        // 确认添加考评员
        submitAddInv(){
            this.getToken(addInvigilatorApi,{'invigilator':this.selectInvigilator,'type':this.type,'examId':this.examId},res=>{
                this.$message.success(res.message)
                this.addInvigilatorModal=false
                this.selectInvigilator=[]
                this.init()
            })
        },
        // 选择考评员
        handleInvigilator(id,realname){
            let during=this.selectInvigilator.filter(item=>item.userId==id).length>0
            if(!during){
                this.selectInvigilator.push({'userId':id,'title':this.invigilatorType.filter(item=>item.value==this.searchInvigilatorInfo.type)[0].name,'realname':realname})
            }else{
                this.selectInvigilator=this.selectInvigilator.filter(item=>item.userId!=id)
            }
        },
        // 根据身份切换考评员
        changeType(data){
            this.searchInvigilatorInfo.type=data
            this.searchInvigilatorInfo.page=1
            this.current=1
            this.getAllAssignInvigilator()
        },
        // 获取考评员列表
        getAllAssignInvigilator(){
            this.getToken(getAllAssignInvigilatorApi,this.searchInvigilatorInfo,res=>{
                this.allAssignInvigilatorList=res.data.rows
                this.assignInvigilatorTotal=res.data.count
                let type=this.invigilatorType.filter(item=>item.value==this.searchInvigilatorInfo.type)[0].name
                //this.allAssignInvigilatorList=this.allAssignInvigilatorList.filter(item=>this.invigilatorList.filter(value=>value.userId==item.userId&&type==value.title).length==0)
                this.allAssignInvigilatorList=this.allAssignInvigilatorList.map(item=>({...item,'isDisabled':this.invigilatorList.filter(value=>value.userId==item.userId&&type==value.title).length==0?1:2}))
            })
        },
        onChange(data){
            this.searchInvigilatorInfo.page=data
            this.current=data
            this.getAllAssignInvigilator()
        }
    }
}
</script>
<style lang='stylus'>
.addInvigilatorModal
    .content{
        display:flex;
        >ul{
            list-style:none;
            border-top:1px solid #ddd;
            border-left:1px solid #ddd;
            padding:0;
            width:20%;
            height:130px;
            li{
                border-bottom:1px solid #ddd;
                padding:5px 10px;
                cursor:pointer;
            }
            li.active{
                background:#e6f7ff;
            }
        }
        .list{
            width:80%;
            border:1px solid #ddd;
            padding:10px;
            >div{
                height:500px;
                overflow-y:scroll;
                label{
                    width:120px;
                    text-align:left;
                    height:40px;
                }
                label:nth-child(1){
                    margin-left:8px;
                }
            }
            .listWrap{
                height:80%;
                margin:20px auto;
                overflow hidden
            }
            .ant-pagination{
                text-align:center;
            }
            
        }
    }
</style>